<template>
    <div>
			<ly-tab v-model="selected"   @input="getPhotoListByCategoryId" activeColor="#ccc">  
				<ly-tab-item v-for="item in tabList" :key="item.id" >
					{{item.title}} 	<div @click="console.log(item.id)"></div>	
				</ly-tab-item>
			</ly-tab>
			<ul class="photo-list">
				<router-link  :to="'/home/photoinfo/'+item.id" v-for="item in list" :key="item.id"  tag="li"> 
						<img v-lazy="item.img_url">
						<div class="info">
							<h1 class="info-title">{{item.title}}</h1>
							<div class="info-body">{{item.zhaiyao}}</div>
						</div>
				</router-link>
			</ul>
    </div>
</template>
<script>
// import mui from ""
import {Toast,Lazyload} from 'mint-ui'
import common from '../../common/common.js'
export default {
  data() {
    return {
		
      selected:0,
      tabList: [],
	  list:{}
		}
	},
	created(){
		this.getAllCategory()
		this.getPhotoListByCategoryId(this.selected)
	},
  methods: {
		
		getAllCategory(){
			this.$http.get('api/getimgcategory').then(result=>{
				if(result.body.status === 0){
					console.log(result.body)
					result.body.message.unshift({title:'全部',id:0})
					this.tabList = result.body.message
					
					//this.tabList.unshift({title:'全部',id:0})
				}else{
					 Toast('加载图片失败！！')
				}
			})
		},
		getPhotoListByCategoryId(cateId){
			this.list=[]
			
			console.log(this.selected)
			this.$http.get('api/getimages/'+cateId).then(result=>{
					if(result.body.status === 0){
					console.log(result.body.message)
					
					result.body.message.forEach(item=>{
                            item.img_url=common.imghost+item.img_url                          
						})
						this.list = result.body.message
					// http://ofv795nmp.bkt.clouddn.com/
				}else{
					 Toast('加载图片失败！！')
				}
			})
		}
	}
};
</script>
<style lang="scss" scoped>
// * {
//   touch-action: pan-y;
// }
// .ly-tab .ly-tab-list .ly-tab-item-active {
// 		color: red !important;
//     border-color: red  !important;
//     border-bottom-style: solid  !important;
// }
.ly-tab{
	.ly-tab-list{
		a{
			height: 30px;
		}
	}
} 
.photo-list{
	list-style: none;
	margin: 0;
	padding: 10px;
	padding-bottom: 0;
	li{
		background-color:#ccc;
		text-align: center;
		margin-bottom: 10px;
		box-shadow: 0 0 9px #223344; 
		position: relative;
		img{
			width: 100%;
			vertical-align:middle;
			
		}
		img[lazy="loading"]{
			width: 40px;
			height: 300px;
			margin:auto;
		}
		.info{
			color: #ffffff;
			text-align: left;
			position: absolute;
			bottom:0;
			background-color: rgba(0,0,0,0.4);
			max-height:84px;
			.info-title{
				font-size: 14px;
			}
			.info-body{
				font-size: 13px;
			}
		}
	}
}

</style>